
      <template>
  <div>
    <div class="content">
      <audio ref="audioPlay" src=""></audio>
      <a class="out"  href="uniwebview://unity_close">
        <img src="../../assets/img/out.png" alt="" />
      </a>
      <img
        v-show="show"
        class="content_li"
        src="../../assets/img/index_li.png"
        alt=""
      />
      <div class="content_box" style="display: flex">
        <div
          class="content_item"
          v-for="(item, i) in list"
          :key="i"
          @click="goVideo(i + 1)"
          v-show="show"
        >
          <div class="content_item_txts" ref="txt">
            {{ item.description }}
          </div>
          <div class="content_item_btn">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

      <script>
export default {
  data() {
    return {
      list: null,
      token: "",
      show: false,
      clicks: false,
      account:''
    };
  },
  created() {
    console.log(this.$route.query,'this.$route.query',window.location.href)
    if(this.$route.query&&this.$route.query.userId){
      this.account = this.$route.query.userId
    }else{
      let href = window.location.href
      this.account = href.substring(href.indexOf('?'),href.indexOf('#')).split('=')[1]
    }
    this.clicks = false;
    this.login();
    this.getList();
    setTimeout(() => {
      this.show = true;
    }, 3000);
  },
  mounted() {},

  methods: {
    out() {
      window.opener = null;
      window.open("about:blank", "_top").close();
    },
    goVideo(i) {
      this.$refs.audioPlay.src = require("../../assets/audio/main.wav");
      this.$refs.audioPlay.play();
      for (let index = 0; index < this.list.length; index++) {
        if (i - 1 == index) {
          this.$refs.txt[index].classList.add("content_item_txt");
        }
      }
      setTimeout(() => {
        this.$router.push({
          path: "/detail",
          query: { index: i },
        });
      }, 1000);
    },
    getList() {
      let _self = this;
      let url = "/indexc";
      this.$axios
        .get(url)
        .then((res) => {
          console.log(res);
          _self.list = res.data;
        })
        .catch((err) => {
          console.log("err", err);
        });
    },

    login() {
      let _self = this;
      let url = "/login";
      // 请求参数
      let data = {
        account: this.account,
      };
      _self.$axios
        .post(url, data)
        .then((res) => {
          console.log(res);
          _self.$store.commit("updateToken", res.data.userinfo.token);
          _self.getList();
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

      <style scoped>
.content {
  width: 100vh;
  height: 100vw;
  transform: rotate(90deg);
  transform-origin: 50vw 50vw;
  background-image: url("https://oss.bigchun.com/dizhili/dizhili_bg.gif");
  background-size: 100% 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content_li {
  position: absolute;
  left: 0;
  right: 0;
  top: -2rem;
  bottom: 0;
  margin: auto;
  width: 12rem;
  height: 7.5rem;
  z-index: -1;
}
.content_item {
  margin: 8px;
}
.content_box {
  margin-top: -1rem;
}

.content_item_txts {
  width: 2.8rem;
  height: 3rem;
  padding: 0.5rem;
  word-wrap: break-word;
  text-align: center;
  margin: 0 auto;
  color: #ffe100;
  background-size: 100% 100%;
  display: -webkit-box;
  word-wrap: break-word;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.28rem;
  display: flex;
  align-items: center;
  font-weight: bold;
  line-height: 0.5rem;
  background-image: url("../../assets/img/kang4.gif");
}
.content_item_txt {
  width: 2.8rem;
  height: 3rem;
  padding: 0.5rem;
  word-wrap: break-word;
  text-align: center;
  margin: 0 auto;
  color: #ffe100;
  background-image: url("../../assets/img/index_txt.png");
  background-size: 100% 100%;
  display: -webkit-box;
  word-wrap: break-word;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.28rem;
  display: flex;
  align-items: center;
  font-weight: bold;
  line-height: 0.5rem;
}
.content_item_btn {
  width: 3rem;
  height: 1rem;
  background-image: url("../../assets/img/index_btn.png");
  background-size: 100% 100%;
  color: #fff;
  font-weight: bold;
  line-height: 1rem;
  margin: 0 auto;
  font-size: 0.28rem;
}
.out {
  position: absolute;
  top: 0;
  left: 0;
}
.out img {
  width: 1.5rem;
  width: 1.5rem;
}
</style>
